import './App.scss'
import { lazy, Suspense } from 'react'
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import { Spin } from 'antd'
// 导入页面=》没有懒加载
// import Layout from '@/pages/layout'
// import Login from '@/pages/login'
// import NotFound from '@/pages/404'
// import Test from './pages/test'

import AuthRoute from './components/auth'

// 导入自定义history对象
import customHistory from '@/utils/history'

// 懒加载语法：const 组件名 = lazy(() => import('组件路径'))
const Layout = lazy(() => import('@/pages/layout'))
const Login = lazy(() => import('@/pages/login'))
const NotFound = lazy(() => import('@/pages/404'))
const Test = lazy(() => import('@/pages/test'))

function App() {
  return (
    <Router history={customHistory}>
      {/* 通过fallback指定懒加载的loading，组件没有加载完成显示fallback中的jsx结构 */}
      <Suspense
        fallback={
          <div className="lazyLoad">
            <Spin size="large" tip="玩命加载中..." />
          </div>
        }>
        <div className="app">
          {/* 路由规则path对应的组件渲染到配置路由的位置 */}
          {/* <div className="box">
        <h1>scss使用</h1>
      </div> */}
          {/* 配置路由规则：根组件配置的一级路由 */}
          <Switch>
            {/* path地址是/,重定向到/home */}
            <Redirect exact from="/" to="/home" />
            {/* <Route path="/home" component={Layout} /> */}
            {/* 
          AuthRoute封装说明：
          1. 可以配置路由
          2. 内部会有拦截（是否有token）
           */}
            <AuthRoute path="/home" component={Layout} abc="1" />
            <Route path="/test" component={Test} />

            <Route path="/login" component={Login} />
            {/* 兜底：404 */}
            <Route component={NotFound} />
          </Switch>
        </div>
      </Suspense>
    </Router>
  )
}

export default App
